<style lang="scss">
.result{
	margin: 16rpx auto;
	padding: 16rpx;
	.result-title{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin: 16rpx auto;	
		.left {
			font-size: 40rpx;
			font-weight: 500;
			.iconfont{
				margin-right: 8rpx;
				font-size: 50rpx;
			}
		}
		.right{
			font-size: 24rpx;
			font-weight: normal;
			text{
				color: $uni-color-primary;
				padding: 0 8rpx;
			}
		}
	}
	.load-more {
		margin: 16rpx auto;
	}
}
.result-none {
	color: #CCCCCC;
	.iconfont {
		font-size: 60rpx;
		text-align: center;
	}
	.no-data {
		text-align: center;
		font-size: 28rpx;
	}
}
</style>
<template>
	<view class="content">
		<view class="top-bar">
			<uni-search-bar @confirm="confirm" @clear="confirm" placeholder="搜索标题或小区名称" v-model="title" />
		</view>
		<view v-if="floorTotal>0" class="result result-floor">
			<view class="result-title">
				<view class="left">
					<text class="iconfont"> &#xe626;</text> 新房
				</view>
				<view class="right">
					搜索到<text>{{floorTotal}}</text>条记录
				</view>
			</view>
			<floor-list :list="floors"></floor-list>
			<view v-if="floors.length < floorTotal" class="load-more">
				<button @click="buttonClick(0)" type="default">加载更多</button>
			</view>
		</view>
		<view v-if="secondHandTotal > 0" class="result result-second">
			<view class="result-title">
				<view class="left">
					<text class="iconfont"> &#xe626;</text> 二手房
				</view>
				<view class="right">
					搜索到<text>{{secondHandTotal}}</text>条记录
				</view>
			</view>
			<second-list :list="secondHands"></second-list>
			<view v-if="secondHands.length < secondHandTotal" class="load-more">
				<button @click="buttonClick(1)" type="default">加载更多</button>
			</view>
		</view>
		<view v-if="floorTotal == 0 && secondHandTotal==0" class="result result-none">
			<view class="iconfont">
				&#xe674;
			</view>
			<view class="no-data">
				无搜索结果
			</view>
		</view>
	</view>
</template>

<script>
	import floorList from '../../components/floor-list.vue'
	import secondList from '../../components/second-list.vue'
	export default {
		components: {
			floorList,
			secondList
		},
		data() {
			return {
				title:'',
				floors:[],
				floorTotal:0,
				secondHands:[],
				secondHandTotal:0,
			};
		},
		methods:{
			confirm(){
				uni.showLoading({
					title:'加载中...'
				})
				Promise.all([this.getFloors(),this.getSecondHands()])
				.then(res=>{
					uni.hideLoading();
				})
			},
			async buttonClick(e){
				uni.showLoading({
					title:'加载中...'
				})
				if (e==0) {
					await this.getFloors();
				} else {
					await this.getSecondHands();
				}
				uni.hideLoading();
			},
			getFloors(){
				const pFloor = this.$http.get("/api/services/app/Floor/GetAll", {
					params: {
						title: this.title,
						skipCount: this.floors.length,
						maxResultCount: 10,
						sorting: 'id desc'
					}
				}).then(res => {
					this.floors = this.floors.concat(res.data.result.items);
					this.floorTotal = res.data.result.totalCount;
				});
			},
			getSecondHands(){
				const pFloor = this.$http.get("/api/services/app/SecondHand/GetAll", {
					params: {
						title: this.title,
						skipCount: this.secondHands.length,
						maxResultCount: 10,
						sorting: 'id desc'
					}
				}).then(res => {
					this.secondHands = this.secondHands.concat(res.data.result.items);
					this.secondHandTotal = res.data.result.totalCount;
				});
			}
		}
	}
</script>


